<template>

  <div>
    <h1 class="title">广告编辑</h1>
    <div class="body">
      <div class="body_title">
        <p>编辑首页</p>
      </div>
      <div class="plus">
        <p class="notice">图片大小为：2M；图片格式为：jpg、png；图片大小为：1920*850px</p>
        <div class="cover">
          <!--显示图片-->
          <div class="plus_img img" v-for="(item,index) in coverList">
            <img :src="item.image"/>
            <div class="back">
              <i class="el-icon-circle-close close" @click="removeImg(index)"></i>
              <p>删除封面图</p>
            </div>
          </div>

          <!--上传图片-->
          <div class="plus_img plus_i" v-show="coverList.length<4">
            <i class="el-icon-circle-plus" @click="addImg"></i>
            <p>上传封面图片</p>
            <input class="upload_input" type="file" ref="file" @change="fileChange" accept=".jpg,.png"/>
          </div>
        </div>
      </div>
    </div>

    <div class="save">
      <el-button type="primary" size="small" @click="save">确定添加</el-button>
      <el-button type="info" size="small" @click="cancel">取消</el-button>
      <p class="notice">如添加失败，请检查信息是否完善!</p>
    </div>
  </div>
</template>

<script>

  const AllowImgFileSize = 2100000

  export default {
    name: "advertising",
    data() {
      return {
        coverList: []
      }
    },
    created() {
      this.initCover()
    },
    methods: {
      initCover() {
        this.$post('/content/admin/ad/query', null, res => {
          this.coverList = res
        })
      },
      addImg() {
        this.$refs.file.click()
      },
      fileChange(event) {
        let reader = new FileReader();
        let file = event.target.files[0]
        let imgUrlBase64;
        if (file) {
          //将文件以Data URL形式读入页面
          imgUrlBase64 = reader.readAsDataURL(file);
          reader.onload = (e) => {
            //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
            if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
              this.$alert('图片大小不能超过2M', '提示', {
                confirmButtonText: '确定',
              })
              return;
            } else {
              this.coverList.push({image: reader.result})
            }
          }
        }
      },
      removeImg(index) {
        this.$confirm('你确定要删除该广告图, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //TODO 删除逻辑
          let id = this.coverList[index].id
          if (id) {
            this.$post("/content/admin/ad/delete", {id}, res => {
              this.coverList.splice(index, 1)
              this.$message({message: '操作成功', type: 'success'})
            })
          } else {
            this.coverList.splice(index, 1)
            this.$message({message: '删除成功', type: 'success'})
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      }
      ,
      save() {
        // if (this.coverList.size == 0)
        //   return
        let newCover = []
        let coverList = this.coverList;
        for (let i in coverList) {
          let id = coverList[i].id
          if (id == undefined || id == null) {
            newCover.push(coverList[i].image)
          }
        }
        if (newCover.length == 0) {
          return
        }
        this.$post("/content/admin/ad/add", {advertisingList: newCover}, res => {
          this.$message({message: '操作成功', type: 'success'})
          this.initCover()
        })
      }
      ,
      cancel() {
        console.log('取消')
      }
    }
  }
</script>

<style scoped>

  .title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
  }

  .body {
    border: 1px solid #EEEEEE;
  }

  .body_title {
    background-color: #EEEEEE;
    padding: 10px;
  }

  .body_title p, .body_main p {
    margin: 0;
  }

  .plus {
    padding: 20px;
  }

  .plus .notice {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .plus .cover > .plus_img {
    height: 110px;
    width: 240px;
    display: inline-block;
    text-align: center;
    border-radius: 8px;
    overflow: hidden;
    margin: 5px 10px;
  }

  .upload_input {
    display: none;
  }

  .plus .cover > .img {
    border: 1px solid #909399;
    position: relative;
  }

  .plus .cover > .img > img {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .plus .cover > .img > .back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    opacity: 0;
  }

  .plus .cover > .img > .back:hover {
    background-color: black;
    opacity: 0.6;
    color: white;
  }

  .plus .cover > .img > .back > .close {
    margin-top: 20px;
    font-size: 40px;
    cursor: pointer;
  }

  .plus .cover > .img > .back > .close:hover {
    z-index: 3;
  }

  .plus .cover > .plus_i {
    border: 1px dashed #909399;
  }

  .plus .cover > .plus_i:hover {
    background-color: #DCDFE6;
  }

  .plus .cover > .plus_i > i {
    margin-top: 20px;
    font-size: 40px;
    cursor: pointer;
  }

  .plus > p {
    font-size: 12px;
  }

  .plus .cover .plus_img p {
    font-size: 12px;
  }

  .save {
    text-align: center;
    margin-top: 20px;
  }

  .save .notice {
    color: #409EFF;
    font-size: 12px;
    font-weight: 800;
  }
</style>
